<div class="knowledge-container">
    <div class="knowledge-header">
        <div class="search-bar">
            <input type="text" placeholder="搜索知识库..." class="search-input">
            <button class="search-button"><i class="fas fa-search"></i></button>
        </div>
        <div class="action-buttons">
            <!--<button class="btn btn-primary"><i class="fas fa-plus"></i> 新建知识库</button>
            <button class="btn btn-secondary"><i class="fas fa-upload"></i> 批量导入</button>-->
            <div class="action-buttons">
                <button class="btn btn-primary" id="newKnowledgeBtn"><i class="fas fa-plus"></i> 新建知识库</button>
                <button class="btn btn-secondary"><i class="fas fa-upload"></i> 批量导入</button>
            </div>
        </div>
    </div>

    <div class="knowledge-grid">
        <!-- 知识库分类筛选 -->
        <div class="category-filter">
            <div class="filter-item active">全部</div>
            <div class="filter-item">政策法规</div>
            <div class="filter-item">行政公文</div>
            <div class="filter-item">办事指南</div>
            <div class="filter-item">会议纪要</div>
            <div class="filter-item">其他</div>
        </div>

        <!-- 九宫格知识库展示 -->
        <div class="grid-container">
            <!-- 知识库卡片 1 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #e3f2fd;">
                    <i class="fas fa-landmark" style="color: #1976d2;"></i>
                </div>
                <h3>公文库</h3>
                <p class="card-desc">政府机关内部各类政府公文</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 1,245</span>
                    <span><i class="fas fa-users"></i> 公共</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline view-btn" data-id="1"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline  manage-btn"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 2 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #e8f5e9;">
                    <i class="fas fa-file-contract" style="color: #388e3c;"></i>
                </div>
                <h3>会议库</h3>
                <p class="card-desc">政府机关内部会议文档</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 892</span>
                    <span><i class="fas fa-users"></i> 内部</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn" data-id="2"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 3 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #fff8e1;">
                    <i class="fas fa-clipboard-list" style="color: #ffa000;"></i>
                </div>
                <h3>信息库</h3>
                <p class="card-desc">政府机关内部信息资料</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 356</span>
                    <span><i class="fas fa-users"></i> 公共</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 4 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #f3e5f5;">
                    <i class="fas fa-comments" style="color: #8e24aa;"></i>
                </div>
                <h3>合同库</h3>
                <p class="card-desc">政府内部合同管理资料</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 567</span>
                    <span><i class="fas fa-users"></i> 内部</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 5 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #e0f7fa;">
                    <i class="fas fa-chart-line" style="color: #00acc1;"></i>
                </div>
                <h3>政策法规库</h3>
                <p class="card-desc">国家及地方各类政策法规数据</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 278</span>
                    <span><i class="fas fa-users"></i> 受限</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 6 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #ffebee;">
                    <i class="fas fa-exclamation-triangle" style="color: #d32f2f;"></i>
                </div>
                <h3>运维知识库</h3>
                <p class="card-desc">运维相关知识</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 134</span>
                    <span><i class="fas fa-users"></i> 受限</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 7 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #e8eaf6;">
                    <i class="fas fa-gavel" style="color: #3949ab;"></i>
                </div>
                <h3>互联网信息库</h3>
                <p class="card-desc">互联网抓取数据</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 421</span>
                    <span><i class="fas fa-users"></i> 公共</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn" data-id="1"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 8 -->
            <div class="knowledge-card">
                <div class="card-icon" style="background-color: #f1f8e9;">
                    <i class="fas fa-leaf" style="color: #7cb342;"></i>
                </div>
                <h3>第三方知识库</h3>
                <p class="card-desc">第三方系统推送数据</p>
                <div class="card-meta">
                    <span><i class="fas fa-file-alt"></i> 198</span>
                    <span><i class="fas fa-users"></i> 公共</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline  view-btn" data-id="2"><i class="fas fa-eye"></i> 查看</button>
                    <button class="btn btn-sm btn-outline manage-btn"><i class="fas fa-cog"></i> 管理</button>
                </div>
            </div>

            <!-- 知识库卡片 9 - 添加新知识库 -->
            <!--<div class="knowledge-card add-new">
                <div class="card-icon" style="background-color: #f5f5f5;">
                    <i class="fas fa-plus" style="color: #757575;"></i>
                </div>
                <h3>新建知识库</h3>
                <p class="card-desc">创建新的知识库分类</p>
                <div class="card-actions">
                    <button class="btn btn-primary"><i class="fas fa-plus"></i> 创建</button>
                </div>
            </div>-->
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
            <button class="page-btn disabled"><i class="fas fa-angle-left"></i></button>
            <button class="page-btn active">1</button>
            <button class="page-btn">2</button>
            <button class="page-btn">3</button>
            <span class="page-ellipsis">...</span>
            <button class="page-btn">8</button>
            <button class="page-btn"><i class="fas fa-angle-right"></i></button>
        </div>
    </div>
</div>
<!-- 新建知识库模态框 -->
<div class="modal-overlay" id="newKnowledgeModal" hidden="hidden">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">新建知识库</h3>
            <button class="modal-close" id="modalClose">&times;</button>
        </div>
        <form id="knowledgeForm">
            <div class="form-group">
                <label for="knowledgeName" class="form-label">知识库名称</label>
                <input type="text" id="knowledgeName" class="form-control" placeholder="请输入知识库名称" required>
            </div>
            <div class="form-group">
                <label for="knowledgeDesc" class="form-label">知识库描述</label>
                <textarea id="knowledgeDesc" class="form-control form-textarea" placeholder="请输入知识库描述"></textarea>
            </div>
            <div class="form-group">
                <label for="knowledgeCategory" class="form-label">知识库分类</label>
                <select id="knowledgeCategory" class="form-control form-select">
                    <option value="">请选择分类</option>
                    <option value="policy">政策法规</option>
                    <option value="document">行政公文</option>
                    <option value="guide">办事指南</option>
                    <option value="meeting">会议纪要</option>
                    <option value="other">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label for="knowledgePermission" class="form-label">访问权限</label>
                <select id="knowledgePermission" class="form-control form-select">
                    <option value="public">公共 (所有人可查看)</option>
                    <option value="internal">内部 (仅组织成员可查看)</option>
                    <option value="restricted">受限 (指定人员可查看)</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">知识库图标</label>
                <div class="icon-selector">
                    <div class="icon-options">
                        <input type="radio" name="knowledgeIcon" id="icon-landmark" value="landmark" checked>
                        <label for="icon-landmark" class="icon-option"><i class="fas fa-landmark"></i></label>

                        <input type="radio" name="knowledgeIcon" id="icon-file" value="file">
                        <label for="icon-file" class="icon-option"><i class="fas fa-file-alt"></i></label>

                        <input type="radio" name="knowledgeIcon" id="icon-folder" value="folder">
                        <label for="icon-folder" class="icon-option"><i class="fas fa-folder"></i></label>

                        <input type="radio" name="knowledgeIcon" id="icon-book" value="book">
                        <label for="icon-book" class="icon-option"><i class="fas fa-book"></i></label>

                        <input type="radio" name="knowledgeIcon" id="icon-database" value="database">
                        <label for="icon-database" class="icon-option"><i class="fas fa-database"></i></label>

                        <input type="radio" name="knowledgeIcon" id="icon-chart" value="chart">
                        <label for="icon-chart" class="icon-option"><i class="fas fa-chart-pie"></i></label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" id="cancelBtn">取消</button>
                <button type="submit" class="btn btn-primary">创建知识库</button>
            </div>
        </form>
    </div>
</div>